site_8g/src/app/[locale]/(TabBar)/profile/ProfileHeader.tsx

"use client";
import { GameListRep, GameRequest } from "@/api/home";
import { userInfoApi } from "@/api/login";
import { UserInfoRep, cleanBounsApi, getUserTransferApi } from "@/api/user";
import {
    BalanceContent,
    BonusContent,
    FreeContent,
    ReplayContent,
} from "@/components/ModalPopup/WalletDescribeModal";
import TipsModal, { ModalProps } from "@/components/TipsModal";
import Vip from "@/components/Vip";
import { HeaderImageMap } from "@/enums";
import useGame from "@/hooks/useGame";
import { Link, useRouter } from "@/i18n/routing";
import { usePollingStore } from "@/stores/usePollingStore";
import { useVipStore } from "@/stores/useVipStore";
import { useWalletStore } from "@/stores/useWalletStore";
import { WalletEnum } from "@/types";
import { vipImages } from "@/utils/constant";
import { copyText, percentage } from "@/utils/methods";
import { useRequest } from "ahooks";
import { Badge, Button, Mask, ProgressBar, Toast } from "antd-mobile";
import clsx from "clsx";
import { useTranslations } from "next-intl";
import Image from "next/image";
import { Fragment, useEffect, useMemo, useRef, useState } from "react";
import { shallow } from "zustand/shallow";
import ChangeAvatar from "./component/ChangeAvatar";

type Props = {
    userInfo: UserInfoRep;
};
const VipCard = () => {
    const t = useTranslations("ProfilePage");
    // const vip_score_exp = useVipStore((state) => state.vipData!.vip_score_exp);
    // const vip_level = useVipStore((state) => state.vipData!.vip_level);
    // const vip_next_level = useVipStore((state) => state.vipData!.vip_next_level);
    // const vip_exp = useVipStore((state) => state.vipData!.vip_exp);

    const userVip = useVipStore((state) => {
        return {
            vip_score_exp: state.vipData!.vip_score_exp,
            vip_level: state.vipData!.vip_level,
            vip_next_level: state.vipData!.vip_next_level,
            vip_exp: state.vipData!.vip_exp,
        };
    }, shallow);
    const router = useRouter();

    // Vip 图标
    const vipIconElement = vipImages.map((item, index) => {
        if (item.leve === userVip.vip_level) {
            return (
                <Fragment key={index}>
                    <Image src={item.src} alt={"vip"} height={110} width={100} />
                    <span className={"icon-level"} style={{ color: item.color }}>
                        {item.leve}
                    </span>
                </Fragment>
            );
        }
    });
    // const vipIconElement = vipImages.map((item, index) => {
    //     if (item.leve === userVip?.vip_level) {
    //         return (
    //             <Fragment key={index}>
    //                 <Image src={item.src} className="block" alt={"vip"} height={110} width={100} />
    //                 <span className={"icon-level"} style={{ color: item.color }}>
    //                     {item.leve}
    //                 </span>
    //             </Fragment>
    //         );
    //     }
    // });

    // if (!userVip) return null;
    return (
        <div className={"vip-card"}>
            {/* <div className={"vip-card__icon"}>{vipIconElement}</div> */}
            <div className={"vip-card-process"}>
                {/*<div className={"process-top"}>{userVip.vip_exp}xp</div>*/}

                <div className="relative mr-[.1rem] flex-1 px-[.3rem]">
                    <ProgressBar
                        percent={percentage(userVip.vip_exp, userVip.vip_score_exp)}
                        style={{
                            "--fill-color": "#11de68",
                            "--track-color": "#2b363f",
                            "--track-width": ".12rem",
                        }}
                    />
                    <div className={"process-bottom text-[#e581ff]"}>
                        <span className="bg-[#0abd71]">VIP{userVip?.vip_level}</span>
                        <div className={"process-bottom-desc"}>
                            {userVip.vip_exp}/{userVip.vip_score_exp}
                        </div>
                        <span className="bg-[#eac61f]">
                            VIP
                            {userVip.vip_next_level}
                        </span>
                    </div>
                </div>
                <div className="vip-card-text" onClick={() => router.push("/vip")}>
                    <span className="underline">CLUBE VIP</span>
                    <i className="iconfont icon-xiangzuo1 block rotate-[180deg]"></i>
                </div>
            </div>
        </div>
    );
};

const WalletCard = () => {
    const userMoney = useWalletStore((state) => {
        return {
            score: state.wallet.score,
            point: state.wallet.point,
            free_score: state.wallet.free_score,
            free_transfer_min: state.wallet.free_transfer_min,
            lose_transfer_min: state.wallet.lose_transfer_min,
            is_point_transfer: state.wallet.is_point_transfer,
            is_free_transfer: state.wallet.is_free_transfer,
            is_lose_transfer: state.wallet.is_lose_transfer,
            lose_score: state.wallet.lose_score,
        };
    }, shallow);

    const t = useTranslations("ProfilePage");
    const tcdoe = useTranslations();

    const tipsRef = useRef<ModalProps>(null);
    const [tipsStatus, setTipsStatus] = useState<keyof typeof WalletEnum>("Bonus");

    const modalHandler = (key: keyof typeof WalletEnum) => {
        setTipsStatus(key);
        tipsRef.current?.onOpen();
    };

    // 未完成游戏
    const gameModelRef = useRef<ModalProps>(null);
    const game = useRef<(GameListRep & { mode: GameRequest["mode"] }) | null>(null);

    // 彩金、免费币、重玩币提现到钱包操作
    const handleAcquire = async (wallet_type: number, transfer: boolean) => {
        if (!transfer) return;

        // 先判断是否有未完成的游戏
        const { data }: any = await userInfoApi();

        // 如果有未完成游戏 彩金游戏-2、免费游戏-3、重玩游戏-4
        if (wallet_type === 2 && data.play_list && data.play_list.length > 0) {
            game.current = data.play_list[0];
            game.current!.mode = 1;
            gameModelRef.current?.onOpen();
            return;
        }

        if (wallet_type === 3 && data.free_game_list && data.free_game_list.length > 0) {
            game.current = data.free_game_list[0];
            gameModelRef.current?.onOpen();
            game.current!.mode = 2;
            return;
        }

        if (wallet_type === 4 && data.lose_game_list && data.lose_game_list.length > 0) {
            game.current = data.lose_game_list[0];
            game.current!.mode = 3;
            gameModelRef.current?.onOpen();
            return;
        }

        getUserTransferApi({ wallet_type })
            .then((res) => {
                if (res.code === 200) {
                    Toast.show(tcdoe("code.200"));
                    setTimeout(() => {
                        tipsRef.current?.onClose();
                    }, 1000);
                }
            })
            .catch((error) => {
                Toast.show(tcdoe(`code.${error.data.code}`));
            });
    };

    const { getGameUrl } = useGame();
    const goGame = () => {
        const current = game.current;
        getGameUrl(current!, { id: current?.id + "", mode: game.current?.mode! });
        tipsRef.current?.onClose();
        gameModelRef.current?.onClose();
    };

    const walletCfg = useMemo(() => {
        return [
            {
                title: t("balance"),
                icon: "icon-qianbao3",
                onClick: () => modalHandler(WalletEnum.Balance),
                value: userMoney.score || "0.0",
                key: "balance",
                dot: userMoney.is_point_transfer ? Badge.dot : null,
            },
            {
                title: t("bonus"),
                icon: "icon-meiyuanzhanghuyue",
                onClick: () => modalHandler(WalletEnum.Bonus),
                value: userMoney.point || "0.0",
                key: "bonus",
                dot: userMoney.is_point_transfer ? Badge.dot : null,
            },
            {
                title: t("free"),
                icon: "icon-Free-Tag",
                onClick: () => modalHandler(WalletEnum.Free),
                value: userMoney.free_score || "0.0",
                key: "free",
                iconStyle: { fontSize: ".22rem" },
                dot:
                    userMoney.is_free_transfer &&
                    userMoney.free_score >= (userMoney?.free_transfer_min || 0)
                        ? Badge.dot
                        : null,
            },
            {
                title: t("replay"),
                icon: "icon-meiyuan2",
                onClick: () => modalHandler(WalletEnum.Replay),
                value: userMoney.lose_score || "0.0",
                key: "replay",
                dot:
                    userMoney.is_lose_transfer &&
                    userMoney.lose_score >= (userMoney?.lose_transfer_min || 0)
                        ? Badge.dot
                        : null,
            },
        ];
    }, [userMoney]);

    return (
        <>
            <TipsModal
                className="walletModal"
                ref={tipsRef}
                title={
                    <div className={"flex items-center text-[#11de68]"}>
                        <i
                            className={"iconfont icon-liwuhuodong mr-[0.0694rem] text-[0.2778rem]"}
                        ></i>
                        {t("modalTitle")}
                    </div>
                }
            >
                {/*/!*现金*!/*/}
                {tipsStatus === WalletEnum.Balance ? <BalanceContent /> : null}
                {/*/!*  彩金*!/*/}
                {tipsStatus === WalletEnum.Bonus ? (
                    <BonusContent handleAcquire={handleAcquire} />
                ) : null}
                {/*/!* 免费币 *!/*/}
                {tipsStatus === WalletEnum.Free ? (
                    <FreeContent handleAcquire={handleAcquire} />
                ) : null}
                {/*/!*  重玩币 *!/*/}
                {tipsStatus === WalletEnum.Replay ? (
                    <ReplayContent handleAcquire={handleAcquire} />
                ) : null}
            </TipsModal>
            {/*   提现拦截 */}
            <TipsModal title={"Tips"} ref={gameModelRef}>
                <p className={"text-left text-[0.12rem] font-medium text-[#666]"}>
                    Existem jogos de bônus pendentes que não podem iniciar a retirada.
                </p>

                <div className={"mt-[0.0694rem] flex justify-center"}>
                    <Button
                        color={"primary"}
                        className={"mx-auto"}
                        style={{
                            "--background-color": "var(--primary-color)",
                            "--border-color": "var(--primary-color)",
                        }}
                        onClick={goGame}
                    >
                        para jogos
                    </Button>
                </div>
            </TipsModal>
            <div className="coin">
                <div className={"coin_right_wallet"}>
                    {walletCfg.map((item, index) => {
                        return (
                            <div
                                key={item.key}
                                className={"wallet_right_content"}
                                onClick={item.onClick}
                            >
                                <Badge
                                    content={item.dot}
                                    style={{
                                        right: "4px",
                                        top: "50%",
                                        width: "6px",
                                        height: "6px",
                                        minWidth: "6px",
                                    }}
                                >
                                    <div className="wallet-right-icon">
                                        <span
                                            className={clsx("coin_left__icon iconfont", item.icon)}
                                            style={{ ...(item.iconStyle || {}) }}
                                        ></span>
                                    </div>
                                </Badge>
                                <section>
                                    <div className={"wallet_header"}>
                                        {item.title}
                                        <div className="wallet-question">?</div>
                                    </div>
                                    <div className="num">
                                        <span className="uppercase">R$</span>
                                        <span>{item.value}</span>
                                    </div>
                                </section>
                            </div>
                        );
                    })}
                </div>
            </div>
        </>
    );
};
const NoBounsWarn = ({ visible, onClose, onConfirm }: any) => {
    const doClose = () => {
        if (typeof onClose === "function") onClose();
    };
    const doConfirm = () => {
        if (typeof onConfirm === "function") onConfirm();
    };

    return (
        <Mask visible={visible} onMaskClick={doClose}>
            <div className="absolute left-[50%] top-[40%] w-[80%] translate-x-[-50%]">
                <div className="relative rounded-[.1rem] bg-[#1f2830] px-[.15rem] pb-[.15rem] pt-[0px]">
                    <div className="h-[.5rem] text-center">
                        <img
                            src="/warn_top.webp"
                            alt=""
                            className="relative -top-[.3rem] inline-block w-[.9rem]"
                        />
                    </div>
                    <div className="text-center text-[.12rem]">
                        A demanda atual de fluxo de retirada de bônus é excessiva，Se esvaziar o
                        bônus e retirar a demanda de água corrente？
                    </div>
                    <div className="mt-[.2rem] flex items-center justify-between px-[.1rem]">
                        <button
                            onClick={doConfirm}
                            className="mr-[.1rem] h-[.35rem] flex-1 rounded-[60px] bg-[#11de68] text-[.14rem] font-bold text-[#12171a]"
                        >
                            A certeza
                        </button>
                        <button
                            onClick={doClose}
                            className="h-[.35rem] flex-1 rounded-[60px] bg-[#ebc71f] text-[.14rem] font-bold text-[#12171a]"
                        >
                            Cancelar
                        </button>
                    </div>
                    <i
                        className="iconfont icon-guanbi absolute right-[.1rem] top-[.1rem]"
                        onClick={doClose}
                    ></i>
                </div>
            </div>
        </Mask>
    );
};
export const ProfileHeader = () => {
    const t = useTranslations("ProfilePage");

    const userMoney = useWalletStore((state) => {
        return {
            target_point_rollover: state.wallet?.target_point_rollover,
            score: state.wallet?.score,
            point: state.wallet?.point,
            no_bonus_config: state.wallet?.no_bonus_config,
            current_score_rollover: state.wallet?.current_score_rollover,
            target_score_rollover: state.wallet?.target_score_rollover,
        };
    }, shallow);
    const refresh = usePollingStore((state) => state.refresh);
    const tc = useTranslations();
    const vipInfo = useVipStore((state) => state.vipData);

    // const { wallet, setWallet } = useWalletStore((state) => ({
    //     wallet: state.wallet,
    //     setWallet: state.setWallet,
    // }));
    const router = useRouter();
    const [isShowNoBounsWarn, setIsShowNoBounsWarn] = useState(false);
    const [isShowAvatar, setIsShowAvatar] = useState(false);
    const [isShowed, setIsShowed] = useState(false);

    const { data: userInfo, run: refreshUserInfo } = useRequest<any, any>(userInfoApi, {
        pollingErrorRetryCount: 1,
    });

    // const userInfo = useMemo(() => {
    //     return data?.data;
    // }, [data]);

    useEffect(() => {
        const curMul =
            userMoney.target_point_rollover / ((userMoney.score || 0) + (userMoney.point || 0));
        const percent = percentage(
            userMoney.current_score_rollover,
            userMoney.target_score_rollover
        );
        const config = userMoney.no_bonus_config;
        if (curMul >= (config || 0) && !isShowed && percent < 100) {
            setTimeout(() => {
                setIsShowNoBounsWarn(true);
            }, 1000);
            setIsShowed(true);
        }
        //todo 修改数据回显
    }, [isShowed]);

    const handler = () => {
        if (!!userMoney.score) {
            router.push("/deposit?target=2");
        } else {
            Toast.show("no money");
        }
    };

    const doConfirm = async () => {
        Toast.show({
            icon: "loading",
            maskClickable: false,
        });
        setIsShowNoBounsWarn(false);
        const res = await cleanBounsApi(1);
        if (res?.code && [6001, 6002].includes(res?.data?.code)) {
            const str = t(`bouns${res?.data?.code}`);
            Toast.show({
                content: str,
                icon: "fail",
            });
        }
        Toast.show({
            content: t("success"),
            icon: "success",
        });
        // const walletRes = await getUserMoneyApi();
        // setWallet(walletRes?.data);
        refresh && refresh();
    };

    const doCopyUsreId = (evt: any) => {
        (evt as any).stopPropagation();
        copyText(`${userInfo.data.user_phone}`);
        Toast.show({ icon: "success", content: tc("SummaryPage.copySuc"), maskClickable: false });
    };

    return (
        <>
            <div className={"userContent"}>
                <div className={"userInfo"}>
                    <div onClick={() => setIsShowAvatar(true)}>
                        <div className={"bgImg"}>
                            <Image
                                src={
                                    HeaderImageMap.get(userInfo?.data?.avatar)?.img ||
                                    "/img/avatar.webp"
                                }
                                className={
                                    "h-[100%] w-[100%] rounded-[50%] border-[2px] border-[#ccc]"
                                }
                                alt={"avatar"}
                                width={120}
                                height={120}
                            />

                            <Vip
                                style={{
                                    position: "absolute",
                                    bottom: "0",
                                }}
                                level={vipInfo?.vip_level || 1}
                                vipIconClassName="relative z-[3]"
                                vipIconStyle={{ width: ".3rem" }}
                            ></Vip>
                        </div>
                        <div>
                            <span className="font-bold">
                                {userInfo?.data?.nick_name || t("Conta")}
                            </span>
                            <div className="flex items-center">
                                <span className="phone text-[#7b939a]">
                                    {userInfo?.data?.user_phone || ""}
                                </span>
                                <i
                                    className="iconfont icon-fuzhi1 text-[#7b939a]"
                                    onClick={doCopyUsreId}
                                ></i>
                            </div>
                        </div>
                    </div>

                    {/* <Link
                        className="goto iconfont icon-xiangzuo1 text-[#7b939a]"
                        href={`/changePassword`}
                    ></Link> */}
                </div>
                {/*vipcard*/}
                <VipCard />

                <WalletCard />
            </div>

            <div className="link">
                <Link href={"/deposit"} className={"btn"}>
                    <i className="iconfont icon-meiyuanzhanghuyue mr-[.1rem]"></i>
                    <span>{t("Depósito")}</span>
                </Link>
                <p className={"btn"} onClick={handler}>
                    <i className="iconfont icon-zhuishou-meiyuan-shi mr-[.1rem]"></i>
                    <span>{t("Sacar")}</span>
                </p>
            </div>
            <NoBounsWarn
                visible={isShowNoBounsWarn} // 控制是否显示遮罩层，true 显示，false 不显示
                onClose={() => setIsShowNoBounsWarn(false)}
                onConfirm={doConfirm}
            ></NoBounsWarn>
            <ChangeAvatar
                visible={isShowAvatar}
                useInfo={userInfo?.data}
                onClose={(needRefresh?: boolean) => {
                    if (needRefresh) refreshUserInfo();
                    setIsShowAvatar(false);
                }}
            ></ChangeAvatar>
        </>
    );
};